<template>
  <div>
    <TableHead />
    <a-table
      v-model:selected-keys="keys"
      row-key="id"
      :row-selection="{
        selectedRowKeys: keys
      }"
      :loading="table.loading"
      :data="table.data"
      :bordered="false"
      class="table-container"
      :columns="translateColumns(columns.columns)"
      :pagination="{
        current: query.pageNum,
        total: query.total,
        pageSize: query.pageSize
      }"
      @page-change="pageChange"
    >
      <template #operation="{ record }">
        <a-dropdown-button size="mini" @click="edit(record.roleId)">
          <IconEdit />
          <template #content>
            <a-doption @click="del(record.roleId)">
              <template #icon>
                <IconDelete />
              </template>
              {{ t["删除"] }}
            </a-doption>
          </template>
        </a-dropdown-button>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { listMenu } from "@/api/service/system/menu";

import columns from "../data/column";
import { del, edit, list } from "../data/curd";
import { keys, query, table, treeData } from "../data/table";
import TableHead from "./table-head/TableHead.vue";

const t = translate("公共模块");
function buildTree(data: Array<any>, parentId = "0"): any[] {
  const result = [];

  for (const item of data) {
    if (item.parentId === parentId) {
      item.children = buildTree(data, item.menuId);
      if (item.children.length === 0) {
        delete item.children;
      }
      result.push({
        key: item.menuId,
        title: t.value[item.menuName] || item.menuName,
        children: item.children || [],
        selected: false
      });
    }
  }
  return result;
}
onMounted(async () => {
  await list();
  const { data } = await listMenu();
  treeData.value = buildTree(data);
});

const pageChange = (page: number) => {
  query.value.pageNum = page;
  list();
};
</script>

<style lang="scss" scoped></style>
